<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>个人中心</title>
    <link href="${pageContext.request.contextPath}/admin/css/styles.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/indexFace/css/me.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/admin/js/all.js"></script>
</head>
<body class="sb-nav-fixed">
<%@ include file="include/head.jsp" %>
<div id="layoutSidenav">
    <%@ include file="include/nav.jsp" %>
    <div id="layoutSidenav_content">
        <div class="container-fluid px-4">
            <div class="card mb-4">
                <div id="me" class="card-body">
                    <label class="info-class"></label>
                    <div class="user-info-row enlarged-font">
                        <p class="info-item-first">
                            <label for="name" class="item-label"></label>
                            <span id="name">{{ info.name }}</span>
                        </p>
                    </div>
                    <hr>

                    <label class="info-class">学籍信息</label>
                    <div class="user-info-row">
                        <p class="info-item-first">
                            <label for="userID" class="item-label">学号: </label>
                            <span id="userID">{{ info.userID }}</span>
                        </p>
                    </div>

                    <label class="info-class">个人信息</label>
                    <div class="user-info-row">
                        <p class="info-item-first">
                            <label for="sex" class="item-label">性别: </label>
                            <span id="sex">{{ info.sex }}</span>
                        </p>
                        <p class="info-item-second">
                            <label for="role" class="item-label">职位: </label>
                            <span id="role">{{ info.role }}</span>
                        </p>
                    </div>

                    <label class="info-class">联系方式</label>
                    <div class="user-info-row">
                        <p class="info-item-first">
                            <label for="mailbox" class="item-label">邮箱: </label>
                            <span id="mailbox">{{ info.mailbox }}</span>
                        </p>
                        <p class="info-item-second">
                            <label for="phone" class="item-label">电话号码: </label>
                            <span id="phone">{{ info.phone }}</span>
                        </p>
                    </div>

                    <br><a href="${pageContext.request.contextPath}/indexFace/editme.jsp">
                        <button type="button">
                            修改信息
                        </button>
                    </a>
                </div>
            </div>
        </div>
        <%@ include file="include/foot.jsp" %>
    </div>
</div>
<script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/scripts.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/simple-datatables@latest.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/datatables-simple-demo.js"></script>
<script src="${pageContext.request.contextPath}/JavaScript/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    var app = new Vue({
        el: "#me",
        data: {
            info: {
                name: '',
                userID: '',
                sex: '',
                mailbox: '',
                phone: '',
                role: ''
            }
        },

        mounted(){
            axios.post('${pageContext.request.contextPath}/me?user_id=${LogUser.getUserID()}')
                .then(response => {
                    this.info = response.data;
                })
        }
    });
</script>

</body>
</html>